<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /* 注：vw“视口宽度”和vh“视口高度”是CSS3中新增的属性，支持IE8(不含)以上的浏览器。使用这两个单位来解决屏幕尺寸适配问题时的致命缺点是：它不能解决文字大小的自适应问题。这将导致使用e-charts插件来显示图表时，缩放图表时，图表中的文字可能会因保留原尺寸而导致溢出显示区域。
            解决文字大小的自适应问题应通过“使用em或rem单位”或“媒体查询”来解决↓ */
            /* 以下内容是文心快码对“为什么vw和vh不能解决文字大小的自适应问题”和“如何解决文字大小的自适应问题”的解释：
            1.为什么vw和vh不能解决文字大小的自适应问题：
            vw和vh单位是相对于视口宽度和高度的相对单位，它们主要用于设置元素的尺寸（如宽度、高度、边距等）。文字大小通常需要使用px、em、rem等单位来设置，其中em和rem是相对于父元素或根元素字体大小的相对单位，更适合实现文字大小的自适应。因此，当使用vw和vh来定义元素的尺寸时，如果元素内包含文字，文字的大小不会根据视口大小自动调整，这可能导致文字溢出或显示不佳。
            2.如何解决文字大小的自适应问题：可以使用em或rem单位来设置文字大小，这样文字大小就可以根据父元素或根元素的字体大小自动调整。另外，也可以使用媒体查询（media queries）来针对不同的屏幕尺寸设置不同的文字大小，以实现更精细的自适应效果。 */
            /* width:1920px; */
            width:100vw;
            /* height: 1080px; */
            /* 注：原型图上下面这两个div的宽高都是100像素。显示设备的宽高如上面的注释中所示。
            换算过程：1vw=1920/100=19.2px,100px/19.2px=5.2083vw,1vh=1080/100=10.8px,100px/10.8px=9.25926vh 50px/19.2px=2.60417vw */
            height: 100vh;
            background-color: red;
        }
        .top{
            /* width: 100px; */
            width: 5.2083vw;
            /* height: 100px; */
            height: 9.25926vh;
            background-color: blue;
            /* 距离左侧50像素↓ */
            margin-left: 2.60417vw;
        }
        .bottom{
            /* width: 100px; */
            width: 5.2083vw;
            /* height: 100px; */
            height: 9.25926vh;
            background-color: green;
            /* 距离左侧50像素↓ */
            margin-left: 2.60417vw;
            /* 距离顶部100像素（即两个元素的间距是100像素）↓ */
            margin-top: 9.25926vh;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>